<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar left-arrow @click-left="$router.go(-1)" />
    </div>
    <!-- 定位当前位置 -->
    <div class="mapPosition">
      <div
        class="positionInfo"
        @click="$router.push('/city')"
      >
        <span v-if="positionInfo">{{positionInfo.province}}</span>
        <van-icon name="arrow" />
      </div>
      <!-- 地图容器 -->
      <div id="iCenter"></div>
    </div>
    <!-- 商铺盒子 -->
    <div class="box">
      <div v-for="item in place">
        <div>
          <h3>{{item.name}}</h3>
          <div>
            <van-icon name="location-o" />
            <span>{{item.address}}</span>
          </div>
          <div>
            <van-icon name="phone-o" />
            <span>{{item.tel}}</span>
          </div>
        </div>
        <div>
          <div>去下单</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { mapState } from "vuex";
export default {
  name: "mapPosition",
  computed: {
    ...mapState(["addr"]),
  },
  data() {
    return {
      positionInfo:null,//存放地址信息
      place:[],//存放奈雪店铺信息
    };
  },

  methods: {
    //由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。
    initMap() {
      AMapLoader.load({
            key:"c3d7704b5004b9686512f5f72a461292",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{


            let geoloc = window.navigator.geolocation;
      geoloc.getCurrentPosition((success) => {
        let lat =this.addr==null? success.coords.latitude:this.addr.lat; // 纬度
        let lng =this.addr==null?  success.coords.longitude:this.addr.lng; // 经度
        var map = new AMap.Map("iCenter", {
          zoom: 13,
          center: [lng, lat],
        });
        //实时路况图层
            var trafficLayer = new AMap.TileLayer.Traffic({
                zIndex: 10
            });
            map.add(trafficLayer);//添加图层到地图
            //将当前位置通过点标记的方式添加到地图
            let marker = new AMap.Marker({
                position: [lng, lat],
                title: '这是我的家',
                
            })
            map.add(marker)
            AMap.plugin(['AMap.Geocoder','AMap.PlaceSearch'],()=>{
              //逆地理编码，通过经纬度检索地址信息
                let geocoder = new AMap.Geocoder()
                let that=this
                geocoder.getAddress([lng, lat], function (status, result) {
              
                    console.log('地址信息',status, result)
                    that.getAddr(result.regeocode.addressComponent)
                    var placeSearch = new AMap.PlaceSearch({
                    // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
                    city: `${result.regeocode.addressComponent.adcode}`,
                    pageSize: 20,
                });
                placeSearch.search('奈雪', function (status, result) {
                    // 查询成功时，result即对应匹配的POI信息

                    console.log(status,'POI', result)
                    that.getPlace(result.poiList.pois)
                });
              
                })
                
                 
            })
      });


        }).catch(e=>{
            console.log(e);
        })
    
      // let geoloc = window.navigator.geolocation;
      // geoloc.getCurrentPosition((success) => {
      //   let lat =this.addr==null? success.coords.latitude:this.addr.lat; // 纬度
      //   let lng =this.addr==null?  success.coords.longitude:this.addr.lng; // 经度
      //   var map = new AMap.Map("iCenter", {
      //     zoom: 13,
      //     center: [lng, lat],
      //   });
      //   //实时路况图层
      //       var trafficLayer = new AMap.TileLayer.Traffic({
      //           zIndex: 10
      //       });
      //       map.add(trafficLayer);//添加图层到地图
      //       //将当前位置通过点标记的方式添加到地图
      //       let marker = new AMap.Marker({
      //           position: [lng, lat],
      //           title: '这是我的家',
                
      //       })
      //       map.add(marker)
      //       AMap.plugin(['AMap.Geocoder','AMap.PlaceSearch'],()=>{
      //         //逆地理编码，通过经纬度检索地址信息
      //           let geocoder = new AMap.Geocoder()
      //           let that=this
      //           geocoder.getAddress([lng, lat], function (status, result) {
              
      //               console.log('地址信息',status, result)
      //               that.getAddr(result.regeocode.addressComponent)
      //               var placeSearch = new AMap.PlaceSearch({
      //               // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
      //               city: `${result.regeocode.addressComponent.adcode}`,
      //               pageSize: 20,
      //           });
      //           placeSearch.search('奈雪', function (status, result) {
      //               // 查询成功时，result即对应匹配的POI信息

      //               console.log(status,'POI', result)
      //               that.getPlace(result.poiList.pois)
      //           });
              
      //           })
                
                 
      //       })
      // });
      //以为这里是要获取地图容器的id,所以要写在mounted之中
      // var geolocation;
      // var that = this;
      // mapObj.plugin("AMap.Geolocation", function () {
      //   geolocation = new AMap.Geolocation({
      //     enableHighAccuracy: true, // 是否使用高精度定位，默认:true
      //     timeout: 10000, // 超过10秒后停止定位，默认：无穷大
      //     maximumAge: 0, // 定位结果缓存0毫秒，默认：0
      //     convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      //     showButton: true, // 显示定位按钮，默认：true
      //     buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
      //     buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      //     showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
      //     showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
      //     panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
      //     zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      //   });
      //   mapObj.addControl(geolocation);
      //   geolocation.getCurrentPosition();
      //   AMap.event.addListener(geolocation, "complete", that.onComplete); // 返回定位信息
      //   AMap.event.addListener(geolocation, "error", that.onError); // 返回定位出错信息
      // });
    },
    getAddr(name){
       console.log('name',name)
       this.positionInfo=name
       console.log('pos',this.positionInfo)
    },
    // 得到城市对应奶茶店铺
    getPlace(place){
      this.place=place
    }
    // onComplete(obj) {
    //   console.log("addr", this.addr);
    //   this.positionInfo = obj;
    //   //this.$store.commit('updatePos',obj.position)
    //   //       obj.position
    //   // .lng=121.472644
    //   //        obj.position
    //   // .lat=31.231706
    //   var res =
    //     "经纬度：" +
    //     obj.position +
    //     "\n精度范围：" +
    //     obj.accuracy +
    //     "米\n定位结果的来源：" +
    //     obj.location_type +
    //     "\n状态信息：" +
    //     obj.info +
    //     "\n地址：" +
    //     obj.formattedAddress +
    //     "\n地址信息：" +
    //     JSON.stringify(obj.addressComponent, null, 4);
    //   console.log("positionInfo", this.positionInfo);
    //   console.log(res);
    // },
    // onError(obj) {
    //   alert(obj.info + "--" + obj.message);
    //   console.log(obj);
    // },
  },
  mounted() {
    this.initMap()
  },
};
</script>
<style lang="scss" scoped>
.mapPosition {
  height: 50vh;
  .positionInfo {
    padding: 0 4vw;
    span {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      font-size: 21px;
    }
  }
  #iCenter {
    width: 100vw;
    height: 50vw;
    //background-color: red;
  }
}
</style>
